<template>
  <div class="tab">
    <van-tabs v-model="active">
      <van-tab title="购买该商品的还购买了">
        <div class="box">
          <div class="cont">
            <div class="cont_a" v-for="item in like" :key="item.ItemCode">
              <img referrerpolicy="no-referrer" :src="item.img" alt="">
              <p class="tit">{{ item.Cpmc }}</p>
              <p class="price">￥{{ item.Price }}</p>
            </div>
          </div>
        </div>
      </van-tab>

      <van-tab title="巧克力 | 花瓶">
        <div class="box">
          <div class="cont">
            <div class="cont_a" v-for="item in like2" :key="item.ItemCode">
              <img referrerpolicy="no-referrer" :src="item.img" alt="">
              <p class="tit">{{ item.Cpmc }}</p>
              <p class="price">￥{{ item.Price }}</p>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  name: 'LtabView',
  data() {
    return {
      active: '',
      like: [],
      like2: [],
    }
  },
  mounted() {
    this.$axios.get('/api/list').then(res => {
      // console.log(res.data.data.index)
      // let arr = [];
      let arr2 = [...res.data.data.index.qkl.data, ...res.data.data.index.ysh.data];

      this.like = res.data.data.index.lr.data;
      this.like2 = arr2;
    })
  }
}
</script>

<style lang="less" scoped>
.tab {
  .box {
    overflow-y: hidden;
    width: 100%;

    .cont {
      display: flex;
      padding: .4rem;
      width: 190vw;
      background-color: #fff;

      .cont_a {
        width: 1.6rem;
        height: 2.56rem;
        margin-right: .2rem;

        img {
          width: 1.56rem;
          height: 1.72rem;
          margin: 0 auto;
        }

        .tit {
          margin: .1rem 0;
          height: .27rem;
          overflow: hidden;
        }
      }
    }
  }
}
</style>